Vue.component('icon', {
    props: ['name'],
    template: `<svg class="icon"><use :xlink:href="'#'+name"></use></svg>`
});
new Vue({
    el: '.container',
    data: {
        filter: '',
        keys: []
    },
    created () {
        let vm = this;
        vm.refresh();
    },
    computed: {
        filteredKeys () {
            let vm = this;
            let filter = vm.filter, keys = vm.keys;
            return keys.map((item, i) => Object.assign(item, {$index: i})).filter(item => item.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
        }
    },
    methods: {
        clean () {
            let vm = this;
            let $confirm = confirm('确认删除?');
            if (!$confirm) {
                return;
            }
            vm.$clean().then((success) => {
                alert(success ? '清空成功!' : '清空失败!');
                if (success) {
                    vm.keys = [];
                }
            });
        },
        refresh () {
            let vm = this;
            vm.$allNames().then((keys) => {
                vm.keys = keys.map((key) => {
                    return {
                        $expand: false,
                        $loading: false,
                        $level: 0,
                        name: key,
                        child: []
                    };
                });
            });
        },
        remove (key, index) {
            let vm = this;
            let $confirm = confirm('确认删除?');
            if (!$confirm) {
                return;
            }
            vm.$remove(key).then((success) => {
                alert(success ? '删除成功!' : '删除失败!');
                if (success) {
                    vm.keys.splice(index, 1);
                }
            });
        },
        get(name) {
            let vm = this;
            vm.$get(name).then(data => alert(JSON.stringify(data)));
        },
        toggleExpand (item) {
            let vm = this;
            let copyFilter = vm.filter;
            vm.filter = '';
            if (!item.$expand && !item.child.length) {
                item.$loading = true;
                vm.$allKeys(item.name).then(data => {
                    item.$loading = false;
                    item.child = data.map(key => {
                        return {
                            $level: 1,
                            name: key
                        };
                    });
                    vm.keys.splice(item.$index + 1, 0, ...item.child);
                    item.$expand = !item.$expand;
                    vm.filter = copyFilter;
                });
                return;
            }
            if (item.$expand) {
                vm.keys.splice(item.$index + 1, item.child.length);
            } else {
                vm.keys.splice(item.$index + 1, 0, ...item.child);
            }
            item.$expand = !item.$expand;
            vm.filter = copyFilter;
        },
        $allNames () {
            return new Promise((resolve) => {
                fetch('/names', {
                    credentials: 'include'
                }).then((res) => {
                    res.json().then((data) => resolve(data));
                }).catch(() => {
                    alert('网络请求错误');
                    resolve([]);
                });
            });
        },
        $allKeys (name) {
            return new Promise((resolve) => {
                fetch(`/keys?name=${name}`, {
                    credentials: 'include'
                }).then((res) => {
                    res.json().then((data) => resolve(data));
                }).catch(() => {
                    alert('网络请求错误');
                    resolve([]);
                });
            });
        },
        $clean () {
            return new Promise((resolve) => {
                fetch('/cls', {
                    credentials: 'include'
                }).then(() => resolve(true)).catch(() => resolve(false));
            });
        },
        $remove (key) {
            return new Promise((resolve) => {
                fetch(`/rem?name=${key}`, {
                    credentials: 'include'
                }).then(() => resolve(true)).catch(() => resolve(false));
            });
        },
        $get (key) {
            return new Promise((resolve) => {
                fetch(`/get?name=${key}`, {
                    credentials: 'include'
                }).then((res) => {
                    res.json().then((data) => resolve(data));
                }).catch(() => resolve(false));
            });
        }
    }
});
